<!-- 
	This is the user profile page, it uses the dashboard layout in: 
	"./layouts/Dashboard.vue" .
 -->

<template>
	<div>

		<!-- Header Background Image -->
		<div class="profile-nav-bg" style="background-image: url('images/bg-profile.jpg')"></div>
		<!-- / Header Background Image -->

		<!-- User Profile Card -->
		<a-card :bordered="false" class="card-profile-head" :bodyStyle="{padding: 0,}">
      <div class="ant-card-head">
        <div class="ant-card-head-wrapper">
                <div class="ant-card-head-title">
                  <div class="ant-row-flex ant-row-flex-middle">
                    <div class="col-info ant-col ant-col-24 ant-col-md-12">
                      <span class="ant-avatar ant-avatar-square" style="width: 74px; height: 74px; line-height: 74px; font-size: 18px;">
                        <img :src="this.profileImg">
                      </span>
                      <div class="avatar-info"><h4 class="font-semibold m-0">{{ name }}</h4>
                        <p>{{ major }}</p></div>
                    </div>
                  </div>
                </div>
        </div>
      </div>


<!--      <template #title>-->
<!--				<a-row type="flex" align="middle">-->
<!--					<a-col :span="24" :md="12" class="col-info">-->
<!--            <a-avatar :size="74" shape="square" src="http://localhost:1453/files/face.jpg"/>-->
<!--						<div class="avatar-info">-->
<!--							<h4 class="font-semibold m-0">{{ name }}</h4>-->
<!--							<p>{{ major }}</p>-->
<!--						</div>-->
<!--					</a-col>-->

<!--				</a-row>-->
<!--			</template>-->
		</a-card>
		<!-- User Profile Card -->

		<a-row type="flex" :gutter="24">

			<!-- Platform Settings Column -->
			<a-col :span="24" :md="12" class="mb-24">

				<!-- Platform Settings Card -->
        <a-card :bordered="false" class="header-solid h-full" :bodyStyle="{paddingTop: 0, paddingBottom: 0 }">
          <template #title>
            <h6 class="font-semibold m-0">基础设置</h6>
          </template>
          <ul class="list settings-list">
            <li>
              <h6 class="list-header text-sm text-muted">账号</h6>
            </li>
            <li>
              <a-switch v-model="emailNoti" @change="setSetting(1)"/>
              <span>反馈通过认证通过邮件通知我</span>
            </li>
            <li>
              <a-switch v-model="hideName" @change="setSetting(2)"/>
              <span>向他人隐藏姓名</span>
            </li>
            <li>
              <a-switch v-model="hideContact" @change="setSetting(3)"/>
              <span>向他人隐藏联系方式</span>
            </li>
          </ul>
        </a-card>
				<!-- / Platform Settings Card -->

			</a-col>
			<!-- / Platform Settings Column -->

			<!-- Profile Information Column -->
			<a-col :span="24" :md="12" class="mb-24">

				<!-- Profile Information Card -->
				<CardProfileInformation
            @sendMsg="process" :realName="realName"
            :contact="contact"
            :email="email"
            :location="location"
            :role="role"
            :userId="userId"></CardProfileInformation>
				<!-- / Profile Information Card -->

			</a-col>
			<!-- / Profile Information Column -->
			
			<!-- Conversations Column -->

			<!-- / Conversations Column -->

		</a-row>

    <a-row type="flex" :gutter="24" style="margin-bottom: 20px">
      <a-col :span="24" :md="24" class="md-24">


          <!-- Conversations Card -->
          <CardConversations
              :data="conversationsData"
          ></CardConversations>
          <!-- / Conversations Card -->

      </a-col>
    </a-row>


		<!-- Projects Card -->
<!--		<a-card :bordered="false" class="header-solid h-full mb-24" :bodyStyle="{paddingTop: '14px'}">-->
<!--			<template #title>-->
<!--				<h6 class="font-semibold">Projects</h6>			-->
<!--				<p>Architects design houses</p>	-->
<!--			</template>-->

<!--			<a-row type="flex" :gutter="[24,24]" align="stretch">-->

<!--				&lt;!&ndash; Project Column &ndash;&gt;-->
<!--				<a-col :span="24" :md="12" :xl="6" v-for="(project, index) in projects" :key="index">-->
<!--					<CardProject-->
<!--						:id="project.id"-->
<!--						:title="project.title"-->
<!--						:content="project.content"-->
<!--						:cover="project.cover"-->
<!--						:team="project.team"-->
<!--					></CardProject>-->
<!--				</a-col>-->
<!--				&lt;!&ndash; / Project Column &ndash;&gt;-->

<!--				&lt;!&ndash; Project Column &ndash;&gt;-->
<!--				<a-col :span="24" :md="12" :xl="6">-->

<!--					&lt;!&ndash; Project Upload Component &ndash;&gt;-->
<!--					<a-upload-->
<!--						name="avatar"-->
<!--						list-type="picture-card"-->
<!--						class="projects-uploader"-->
<!--						:show-upload-list="false"-->
<!--					>-->
<!--						<img v-if="false" src="" alt="avatar" />-->
<!--						<div v-else>-->
<!--							<a-icon v-if="false" type="loading" />-->
<!--							<svg v-else width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">-->
<!--								<path fill-rule="evenodd" clip-rule="evenodd" d="M3 17C3 16.4477 3.44772 16 4 16H16C16.5523 16 17 16.4477 17 17C17 17.5523 16.5523 18 16 18H4C3.44772 18 3 17.5523 3 17ZM6.29289 6.70711C5.90237 6.31658 5.90237 5.68342 6.29289 5.29289L9.29289 2.29289C9.48043 2.10536 9.73478 2 10 2C10.2652 2 10.5196 2.10536 10.7071 2.29289L13.7071 5.29289C14.0976 5.68342 14.0976 6.31658 13.7071 6.70711C13.3166 7.09763 12.6834 7.09763 12.2929 6.70711L11 5.41421L11 13C11 13.5523 10.5523 14 10 14C9.44771 14 9 13.5523 9 13L9 5.41421L7.70711 6.70711C7.31658 7.09763 6.68342 7.09763 6.29289 6.70711Z" fill="#111827"/>-->
<!--							</svg>-->

<!--							<div class="ant-upload-text font-semibold text-dark">-->
<!--								Upload New Project-->
<!--							</div>-->
<!--						</div>-->
<!--					</a-upload>-->
<!--					&lt;!&ndash; / Project Upload Component &ndash;&gt;-->

<!--				</a-col>-->
<!--				&lt;!&ndash; / Project Column &ndash;&gt;-->

<!--			</a-row>-->
<!--		</a-card>-->
		<!-- / Projects Card -->

	</div>
</template>

<script>

	import CardPlatformSettings from "../components/Cards/CardPlatformSettings"
	import CardProfileInformation from "../components/Cards/CardProfileInformation"
	import CardConversations from "../components/Cards/CardConversations"
	import CardProject from "../components/Cards/CardProject"

	// Conversation's list data.
	const conversationsData = [
		{
			id: "1",
			title: "站内运营人员",
			code: "您好，我们需要和您核实一下相关信息，请问方便通话嘛？",
			avatar: "images/face-3.jpg",
		},
		{
			id: "2",
			title: "SkyID",
			code: "我也被同一个人骗了...",
			avatar: "images/face-16.jpg",
		},

	] ;

	// Project cards data
	const projects = [
		{
			id: 1,
			title: "Modern",
			content: "As Uber works through a huge amount of internal management turmoil.",
			cover: "images/home-decor-3.jpeg",
			team: [
				"images/face-1.jpg",
				"images/face-4.jpg",
				"images/face-2.jpg",
				"images/face-3.jpg",
			],
		},
		{
			id: 2,
			title: "Scandinavian",
			content: "Music is something that every person has his or her own specific opinion about.",
			cover: "images/home-decor-2.jpeg",
			team: [
				"images/face-1.jpg",
				"images/face-4.jpg",
				"images/face-2.jpg",
				"images/face-3.jpg",
			],
		},
		{
			id: 3,
			title: "Minimalist",
			content: "Different people have different taste, and various types of music, Zimbali Resort.",
			cover: "images/home-decor-1.jpeg",
			team: [
				"images/face-1.jpg",
				"images/face-4.jpg",
				"images/face-2.jpg",
				"images/face-3.jpg",
			],
		},
	] ;

	export default ({
		components: {
			CardPlatformSettings,
			CardProfileInformation,
			CardConversations,
			CardProject,
		},
		data() {
			return {
				// Active button for the "User Profile" card's radio button group.
				profileHeaderBtns: 'overview',

				// Associating Conversation's list data with its corresponding property.
				conversationsData,

				// Project cards data
				projects,
        userId: null,
        name: null,
        profileImg:"images/face-12.jpg",
        email: null,
        realName : null,
        contact: null,
        location : null,
        major : null,
        emailNoti: false,
        hideName: false,
        hideContact: false,
        role : null,
			}
		},
    methods:{
      backHistory(){
        this.$router.go(-1);
      },
      getUserInfo(){
        this.$axios({
          headers: {
            "Content-Type": "application/json;charset=UTF-8",
            "Authorization": sessionStorage.getItem("systemToken")
          },
          url: "/api/user/getUserInfoByUserId", //后端请求的路径
          method: "post",
          params: {
            userId: sessionStorage.getItem("userId"),
          },
        }).then((response) => {
          if (response.data.status == 0){
            this.userId = response.data.data.user.userId
            this.role = response.data.data.user.role
            this.contact = response.data.data.userDetails.contact
            this.location = response.data.data.userDetails.location
            this.major = response.data.data.userDetails.major
            this.emailNoti = response.data.data.userDetails.emailNoti
            this.hideName = response.data.data.userDetails.hideName
            this.hideContact = response.data.data.userDetails.hideContact
            this.realName = response.data.data.userDetails.realName
            this.realName = response.data.data.userDetails.realName
            this.email = response.data.data.userDetails.email
            this.profileImg = "http://localhost:1453" + response.data.data.userDetails.profilePhoto
            this.name = response.data.data.user.name
          }else {
            swal("非法请求","","warning")
                .then((e) => {
                  this.backHistory();
                })
          }

        });
      },
      setSetting(index){
        console.log(this.emailNoti)
        this.$axios({
          headers: {
            "Content-Type": "application/json;charset=UTF-8",
            "Authorization": sessionStorage.getItem("systemToken")
          },
          url: "/api/user/updateUserSetting", //后端请求的路径
          method: "post",
          data: {

              emailNoti : this.emailNoti,
              hideName : this.hideName,
              hideContact : this.hideContact,
              userId: this.userId

          },
        }).then((response) => {
          console.log(response.data)
          if (response.data.status !== 0) {
            this.$notify({
              title: '抱歉',
              message: '系统出现问题请稍后再试',
              type: 'warning'
            });
            if (index === 1) {
              if (!this.emailNoti) {
                this.emailNoti = true
                console.log(this.emailNoti)
              }else if (this.emailNoti){
                this.emailNoti = false
              }
            }else if (index === 2){
              if (!this.hideName) {
                this.hideName = true
              }else if (this.hideName){
                this.hideName = false
              }
            }else if (index === 3){
              if (!this.hideContact) {
                this.hideContact = true
              }else if (this.hideContact){
                this.hideContact = false
              }
            }
          }
        });
      },
      editProfile(){
        this.$alert('这是一段内容', '个人信息修改', {
          confirmButtonText: '确定',
          callback: action => {
            this.$message({
              type: 'info',
              message: `action: ${ action }`
            });
          }
        });
      }
    },
    mounted() {
      this.getUserInfo()
    },

  })

</script>

<style lang="scss">
</style>